<template>
    <view>
        <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="data.bannner" :current="data.current"
            :mode="data.mode" :dots-styles="data.dotsStyles" field="content">
            <swiper class="swiper-box" @change="change" :current="data.swiperDotIndex" style="height: 500rpx;">
                <swiper-item v-for="(item, index) in data.bannner" :key="index">
                    <img :src="item.url" alt="item.name" style="width: 100%;">
                </swiper-item>
            </swiper>
        </uni-swiper-dot>
        <view style="padding: 0 30rpx; font-size: 30rpx;">
            <view style="margin-top: 25rpx;">
                ￥<text style="color: red; font-size: 40rpx">{{ data.good_date.g_price }}</text>
            </view>
            <view style="margin: 25rpx 0 0 30rpx; font-weight: 700; width: 100%; ;">
                {{ data.good_date.g_name }}
            </view>

            <view style="margin-top: 25rpx; font-size: 25rpx;">
                <text>总销量:</text>
                <text style="color: red;">{{ data.good_date.g_sales }}</text>
            </view>

            <view style="width: 100%; border-top: 1px solid #ccc;margin-top: 25rpx; padding-top: 25rpx;">
                {{ data.good_date.g_info }}
            </view>
        </view>


        <view class="goods-carts">
            <uni-goods-nav :options="data.options" :fill="true" :button-group="data.buttonGroup" @click="onClick"
                @buttonClick="buttonClick" />
        </view>
        <Popup :bannner="data.bannner[0]?.url ? data.bannner[0].url : ''" :good_date="data.good_date" ref="share"
            @pay="pay">
        </Popup>
        <Pay  ref="payref"></Pay>
    </view>
</template>
<script lang='ts' setup>
import { reactive, ref } from 'vue'
import { onLoad, onReachBottom } from "@dcloudio/uni-app"
import { ShoppingCartAddApi, ShoppingCartListApi, goodsListOneApi } from '../../https/http'
import Popup from "./popup.vue";
import Pay from "../pay/pay.vue";
const share = ref()
const payref = ref()

const data = reactive<{
    u_id: string
    g_id: number | null
    good_date: any
    status: string
    contentText: {},
    current: number,
    mode: string,
    dotsStyles: {}
    swiperDotIndex: number,
    bannner: {
        url: string
        name: string
    }[]
    options: {
        icon: string
        text: string
        infoBackgroundColor?: string
        infoColor?: string
        info?: number
    }[]
    buttonGroup: {}[]
    customButtonGroup: {}[]
    customButtonGroup1: {}[]
}>({
    u_id: '',
    g_id: 0,
    good_date: {},
    status: "more", //more	加载前  loading	加载中  no-more 没有更多数据
    contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
    },
    current: 0,
    swiperDotIndex: 0,
    mode: 'round',
    dotsStyles: {
        backgroundColor: 'rgba(255, 90, 95,0.3)',
        border: '1px rgba(255, 90, 95,0.3) solid',
        color: '#fff',
        selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
        selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
    },
    bannner: [
    ],
    options: [{
        icon: 'chat',
        text: '客服'
    }, {
        icon: 'cart',
        text: '购物车',
        info: 0
    }],
    buttonGroup: [{
        text: '加入购物车',
        backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
        color: '#fff'
    },
    {
        text: '立即购买',
        backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
        color: '#fff'
    }
    ],
    customButtonGroup: [{
        text: '加入购物车',
        backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
        color: '#fff'
    },
    {
        text: '立即购买',
        backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
        color: '#fff'
    }
    ],
    customButtonGroup1: [{
        text: '立即购买',
        backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
        color: '#fff'
    }]
})
onLoad((e: any) => {
    try {
        const u_id = uni.getStorageSync('d_usern');
        data.u_id = u_id
        ShoppingCartNum()
    } catch (e) {
        // error
        console.log(e);
    }
    data.g_id = e.g_id
    data.good_date = {}
    data.status = "more"
    newData()
})
const ShoppingCartNum = async () => {
    const res = await ShoppingCartListApi((data.u_id as string))
    if (data.options[1].info != null) {
        let num = 0
        res.data.forEach((item,index)=>{
            num+=item.shopping_cart_num
        })
        data.options[1].info = num
    }
}
const clickItem = (e: any) => {
    data.swiperDotIndex = e
}
const change = (e: any) => {
    data.current = e.detail.current
}
const newData = async () => {
    const res = await goodsListOneApi((data.g_id as number))
    if (res.code == 200) {
        data.good_date = res.data
        data.bannner = JSON.parse((res.data.g_img as any));
    }
}
const onClick = (e: any) => {
    if (e.index == 1) {
        uni.switchTab({
            url: "/pages/shop_car/shop_car"
        })
    }
    uni.showToast({
        title: `点击${e.content.text}`,
        icon: 'none'
    })
}
const buttonClick = async (e: any) => {
    // 加入购物车
    if (e.index == 0) {
        const res = await ShoppingCartAddApi(data.u_id,{
            good_id:data.g_id as number,
            shopping_cart_num:1, 
        })
        console.log(res);
        
        if (data.options[1].info != null) {
            data.options[1].info++
        }
    }

    // 点击支付
    if (e.index == 1) {
        share.value.handelClick()

    }
}
// 确认付款
const pay = (e: any) => {
    // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
    console.log(e);
    
    const pay_data = {
        g_id:e.goods.g_id,
        product_order_money:e.goods.g_price * e.num,
        product_order_num:e.num,
        product_order_state:1
    }
    share.value.closeClick()
    payref.value.pay(e.user.username, pay_data)

}
</script>
<style lang='scss' scoped>
.example-body {
    padding: 0;
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
}

.goods-carts {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    /* #ifdef H5 */
    left: var(--window-left);
    right: var(--window-right);
    /* #endif */
    bottom: 0;
}
</style>